<template>
  <el-card>
    <template v-slot:header>
      <div class="clearfix">
        <span>风险预警</span>
      </div>
    </template>

    <div v-if="showWarningInfoFlag">
      <h4>关于做好新型冠状病毒感染的肺炎疫情防控工作的通知：</h4>
      <p>
        各位师生和家长:
      </p>
      <p>
        近期全国各地区都发生了新型冠状病毒感染的肺炎疫情。当前学校已进入暑假,为确保全体师生身心健康,现将如何科学预防新型冠状病毒和需要家长配合的事宜做以下说明。
      </p>
      <p>
        1、如何科学预防新型冠状病毒
      </p>
      <p>
        (1)勤洗手。使用肥皂或洗手液,并用流动水洗手,不用污浊由的毛巾擦手。
      </p>
      <p>
        (2)保持良好的呼吸道卫生习惯。咳嗽或打喷嚏时,用纸巾、毛巾等遮住口鼻,咳嗽或打喷嚏后洗手,避免用手触摸眼睛、鼻或口。
      </p>
      <p>
        (3)正确佩戴医用外科口罩,对自己和他人负责。
      </p>
      <p>
        (4)增强体质和免疫力。均衡饮食、适量运动、作息规律,避免产生过度疲劳。
      </p>
      <p>
        (5)保持环境清洁和通风。每天开窗通风数次,保持室内空新鲜
      </p>
      <p>
        (6)尽量减少到人群密集场所活动,避免接触呼吸道感染患者。
      </p>
      <p>
        (7)如出现呼吸道感染症状如咳嗽、发热等,及时向当地疾病预防控制机构报告,在其指导下到指定医疗机构进行排查、诊治等。
      </p>
      <p>
        2、新型冠状病毒感染肺炎防控工作
      </p>
      <p>
        (1)从2021年7月15日起到疫情风险解除,实行日报告和零扣报告制度。若发现新型冠状病毒肺炎疑似病例请务必及时报告班主任。对疫情瞒报、漏报、迟报的行为将进行严肃追究。
      </p>
      <p>
        (2)为保障广大师生和家长在新型肺炎发生和处理过程中的知情权,学校会及时、准确做好信息公开,并如实向上级部门汇报。
      </p>
    </div>

    <div v-if="!showWarningInfoFlag">
      <h4>
        您还未收到风险预警信息
      </h4>
    </div>

  </el-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getBaseUserInfo} from "@/utils/token.ts";
import {ApiResponse} from "@/utils/request.ts";
import {checkStudentIsWarningReq} from "@/api/record/confirm.ts";

/**
 * 是否显示风险预警信息
 */
const showWarningInfoFlag = ref<boolean>(true);

onMounted(async () => {
  let userInfo = getBaseUserInfo();
  if (userInfo && userInfo.studentNumber) {
    const result: ApiResponse<any> = await checkStudentIsWarningReq(userInfo.studentNumber)
    //添加或者更新成功
    if (result.code === 1000_0000) {
      showWarningInfoFlag.value = result.data;
    }
  }
})
</script>

<style lang="scss">
.top {
  margin-bottom: 2vh;

  .top-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
  }

  .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 220px;
      }
    }
  }
}


.book-info-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;

  .image {
    display: block;
    height: 40vh;
  }

  .card-item {
    .card-body {
      padding: 0;

      .el-row {
        height: 32px;
      }
    }
  }

  .bottom {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-content: center;
    align-items: center;
    justify-items: center;

    .bottom-left {
      grid-row: 1;
      grid-column: 1;
    }

    .bottom-right-right {
      grid-row: 1;
      grid-column: 6/6;
    }
  }

}

.page-bottom {
  margin-top: 2vh;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dialog-container {
  display: flex;

  .dialog-container-left {
    margin: 0 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-container-right {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}


.bottom {

  .bottom-table {
    margin: 2vh 0;

    .unfold-card {
      background-color: rgba(135 206 250 / .5);

      .unfold {
        width: 40%;
        display: flex;
        justify-content: space-between;

        p:first-child {
          margin-top: 0;
        }
      }
    }
  }
}
</style>
